<template>
	<view>
		<view class="detail_view">
			<view class="detail_top_view">
				<image :src="obtain == 0 ? medal.unStylePicAbsolute : medal.picAbsolute" style="margin-top: 70rpx;width: 242rpx;height: 242rpx;"></image>
				<label style="margin-top: 30rpx;color: #FFFFFF;font-size: 28rpx;padding: 0 30rpx;">{{ medal.name }}</label>
			</view>
			<view class="medal_info_view">
				<label class="medal_title">获取方式</label>
				<label class="medal_des">{{ medal.getMethod }}</label>
				<label class="medal_title">升级方式</label>
				<label class="medal_des">{{ medal.upgradeCondition }}</label>
				<label class="medal_title">勋章说明</label>
				<label class="medal_des">{{ medal.medalExplain }}</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				obtain: 0,
				medal: {}
			}
		},
		methods: {
			requestMain() {
				this.request.httpTokenJsonRequest(`/mp-api/wx/medal/detail/${this.id}`,null,'POST',true).then( res=> {
					if (res.code == 0) {
						this.medal = res.data
					}
				})
			}
		},
		onLoad(option) {
			this.id = option.id
			this.obtain = option.obtain;
			this.requestMain()
		}
	}
</script>

<style scoped>
	.detail_view {
		width: 100%;
		height: 100%;
		background-color: #13161B;
		position: absolute;
		left: 0;
		top: 0;
	}
	.detail_top_view {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 442rpx;
	}
	.medal_info_view {
		width: 100%;
		height: calc(100% - 442rpx);
		margin-bottom: 0rpx;
		margin-top: auto;
		background-color: #25282D;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
	.medal_title {
		margin-top: 40rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.medal_des {
		margin-top: 10rpx;
		margin-left: 40rpx;
		color: #CFD0D1;
		font-size: 26rpx;
		line-height: 40rpx;
		width: calc(100% - 80rpx);
	}
</style>
